<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="count+=1">+1</button>
  </div>
</template>

<script>
import { reactive } from "@vue/composition-api";

export default {
  setup(props, ctx) {
    /** reactive函数接受一个普通对象,返回一个响应式的数据对象
     * 等同于vue2.x的 Vue.observable()*/
    const state = reactive({ count: 0 });
    console.log("state:", state);
    /*
state: {__ob__: Observer, Symbol(vfa.key.reactiveIdentifier): {…}, Symbol(vfa.key.accessControlIdentifier): {…}}
count: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
Symbol(vfa.key.reactiveIdentifier): {}
Symbol(vfa.key.accessControlIdentifier): {}
get count: ƒ getterHandler()
set count: ƒ setterHandler(newVal)
__proto__: Object
*/
    state.count += 1;
    console.log("state:", state);
    /*
state: {__ob__: Observer, Symbol(vfa.key.reactiveIdentifier): {…}, Symbol(vfa.key.accessControlIdentifier): {…}}
count: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
Symbol(vfa.key.reactiveIdentifier): {}
Symbol(vfa.key.accessControlIdentifier): {}
get count: ƒ getterHandler()
set count: ƒ setterHandler(newVal)
__proto__: Object
*/

    return state;
  }
};
</script>

<style lang="scss" scoped></style>
